<template>
  <view>
    <view class="head">
      <view class="topIcon">
        <!-- <u-icon class="iconfont" name="email" color="#fff" size="45" @tap="goMessage"></u-icon> -->
        <view>
          <!-- <u-badge class="badge" :is-dot="true" type="error" :offset="[80, 28]"></u-badge> -->
        </view>
      </view>
      <view class="flex flex-al-c" style="margin: 100upx 0 0 40upx">
        <image
          src="../../static/img/oldboy.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            background-size: cover;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '4' && user.gender == '1'"
        ></image>
        <image
          src="../../static/img/oldgirl.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '4' && user.gender == '0'"
        ></image>
        <image
          src="../../static/img/babyboy.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '1' && user.gender == '1'"
        ></image>
        <image
          src="../../static/img/babygirl.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '1' && user.gender == '0'"
        ></image>
        <image
          src="../../static/img/man.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '3' && user.gender == '1'"
        ></image>
        <image
          src="../../static/img/woman.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '3' && user.gender == '0'"
        ></image>
        <image
          src="../../static/img/woman.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '2' && user.gender == '0'"
        ></image>
        <view style="width: 80%">
          <view
            class="flex"
            style="color: #fff; font-size: 40upx; font-weight: 900"
            >{{ user.userName || "无" }}
            <!-- <text style="display: inline-block;margin: 0 30upx;">3岁</text> -->
            <!-- <text class="tag">VIP</text> -->
            <!-- <view>编辑</view> -->
            <view>
              <u-tag
                text="编辑"
                class="btn"
                bg-color="#18C7E1"
                color="#fff"
                border-color="#eee"
                style="margin: 0 0 0 30upx"
                @tap="editInfo"
              />
            </view>
          </view>
        </view>
      </view>
      <view style="text-align: center; margin-top: 0" class="darkmodel">
        <u-circle-progress
          active-color="#05FF8C"
          :percent="infonum"
          inactive-color="#10B0C8"
          bg-color="#18C7E1"
          width="300"
          class="bds"
        >
          <view class="u-progress-content">
            <view
              class="u-progress-dot"
              style="color: #fff; font-size: 60upx; font-weight: 900"
              >{{ infonum }}%
            </view>
            <text class="u-progress-info" style="font-size: 20upx; color: #fff"
              >完成度</text
            >
          </view>
        </u-circle-progress>
        <view
          v-show="ishow"
          style="font-size: 20upx; color: #eee; margin-top: 20upx"
          >官方提醒：方便信息维护，请您尽快完善监护人信息
        </view>
      </view>
    </view>
    <view style="height: 600upx"></view>

    <!-- <view class="u-list">
			<view class="u-item flex flex-j-b flex-al-c uni-item-line" style="padding: 30upx;">
				<view class="flex flex-al-c">
					<image src="../../static/img/renwu.png" mode="aspectFit"
						style="width: 60upx;height: 60upx;"></image>
					<view>预约管理</view>
				</view>
				<view class="iconfont iconarrow-right" style="color: #ccc;"></view>
			</view>
			<view class="u-item flex flex-j-b flex-al-c uni-item-line" style="padding: 30upx;"
				@tap="exit">
				<view class="flex flex-al-c">
					<image src="../../static/img/collection-b.png" mode="aspectFit"
						style="width: 60upx;height: 60upx;"></image>
					<view>退出登录</view>
				</view>
				<view class="iconfont iconarrow-right" style="color: #ccc;"></view>
			</view>
		</view> -->
    <view class="downbaner">
      <view
        class="uni-item-line s1"
        style="
          padding: 30upx 30upx;
          font-size: 40upx;
          font-weight: 900;
          color: #555;
        "
        >常用工具</view
      >
      <view
        class="tools flex"
        style="margin: 50upx 0; flex-wrap: wrap; justify-content: flex-start"
      >
        <view class="item" @tap="goFamily">
          <image
            src="../../static/img/m_f_1.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>家庭关系</view>
        </view>
        <view class="item" @tap="goyuyue">
          <image
            src="../../static/img/m_f_2.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>预约列表</view>
        </view>
        <view class="item" @tap="jiezhong" v-if="utys != 1">
          <image
            src="../../static/img/m_f_3.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>接种记录</view>
        </view>
        <view class="item" @tap="myenshrinemessage">
          <image
            src="../../static/img/m-f_8.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>我的收藏</view>
        </view>
        <view class="item" @tap="gofeedback">
          <image
            src="../../static/img/m_f_4.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>意见反馈</view>
        </view>
        <view class="item" v-if="false">
          <image
            src="../../static/img/m_f_5.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
            @click="mylist"
          ></image>
          <view>我的订单</view>
        </view>
        <view class="item" v-if="false">
          <image
            src="../../static/img/my-icon2.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>推广奖励</view>
        </view>
        <view class="item" v-if="false">
          <image
            src="../../static/img/my-icon4.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>我的优惠券</view>
        </view>
        <view class="item" @tap="goinfo1">
          <image
            src="../../static/img/m_f_5.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>使用条款</view>
        </view>
        <view class="item" @tap="goinfo2">
          <image
            src="../../static/img/m_f_6.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>隐私协议</view>
        </view>
        <view class="item" @tap="goinfo3">
          <image
            src="../../static/img/m_f_7.png"
            mode="widthFix"
            style="width: 47upx; margin-bottom: 20upx"
          ></image>
          <view>推送设置</view>
        </view>
		<view class="item" @tap="gousersetting">
		  <image
		    src="../../static/img/m_f_user.png"
		    mode="widthFix"
		    style="width: 50upx; margin-bottom: 20upx"
		  ></image>
		  <view>账号设置</view>
		</view>
        <view class="item" @tap="exit">
          <image
            src="../../static/img/m_f_9.png"
            mode="widthFix"
            style="width: 50upx; margin-bottom: 20upx"
          ></image>
          <view>退出</view>
        </view>
      </view>
    </view>
    <shortcut
      ref="shortcut"
      class="animated fadeIn"
      style="animation-duration: 500ms"
      :infos="iscard"
      :child="idx"
      v-show="isShowMenu"
      @closeMenu="closeMenu"
    ></shortcut>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      ref="uModal"
      content="确认退出？"
      :async-close="true"
      :show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import shortcut from "../../components/shortcut/shortcut.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    shortcut,
  },
  data() {
    return {
      isShowMenu: false,
      ishow: true,
      user: {},

      showConfirm: false,

      iscard: "",
      idx: "", //营养包
      utys: "", //状态值
      infonum: 0 ,
    };
  },
  filters: {
    userType(inp) {
      let str = "";
      if (inp == 1) str = "儿童";
      if (inp == 2) str = "孕妇";
      if (inp == 3) str = "普通人";
      if (inp == 4) str = "老年人";
      return str;
    },
  },
  methods: {
    tipShow() {
      // let bs = uni.getStorageSync('tipbsf')
      let usertype = uni.getStorageSync("user").userType;
      if (
        usertype != 1 ||
        usertype != 4 ||
        ((usertype != 1 || usertype != 4) && bs == "show")
      ) {
        this.ishow = false;
      }
    },
    isReport() {
      let self = this;
      this.config
        .get("/initUser/pdCommonIsArchives", {})
        .then(({ data: { data } }) => {
          //console.log(data)  //1显示  0不显示
          this.iscard = data;
        });
    },
    getIdx() {
      console.log(123);
      this.config.get("/flow/getUserNutrition").then((res) => {
        console.log(res);
        this.idx = res.data.data;
      });
    },
    goinfo1() {
      uni.navigateTo({
        url: "../main/pub/yhxy",
      });
    },
    goinfo2() {
      uni.navigateTo({
        url: "../main/pub/yszc",
      });
    },
    goinfo3() {
      uni.navigateTo({
        url: "../main/pub/ysopen",
      });
    },
	gousersetting(){
		uni.navigateTo({
		  url: "./usersetting",
		});
	},
    exit() {
      this.showConfirm = true;
    },
    ...mapMutations(["logout"]),
    confirm() {
      // uni.showToast({title: '退出成功',icon: 'none'});

      setTimeout((s) => {
        this.QuitLogin();
        this.logout();
        this.QuitNewLogin();
        uni.navigateTo({
          url: "/pages/login/login2",
        });
      }, 1000);
      this.showConfirm = false;
    },
    QuitLogin() {
      this.config
        .post("/initUser/loginoutCId", {
          cType: uni.getStorageSync("device"),
          cid: uni.getStorageSync("cid"),
        })
        .then((res) => {
          console.log(res);
        });
    },
    QuitNewLogin() {
      this.config.post("/initUser/loginOut", {}).then((res) => {
        console.log(res);
      });
    },
    cancel() {
      this.showConfirm = false;
    },
    closeMenu(msg) {
      this.isShowMenu = false;
    },
    editInfo() {
      uni.navigateTo({
        url: "/pages/reg/edit-info",
      });
    },
    // 去消息列表
    goMessage() {
      uni.navigateTo({
        url: "/pages/main/pub/message-list",
      });
    },
    goFamily() {
      uni.navigateTo({
        url: "/pages/main/pub/family-list",
      });
    },
    goyuyue() {
      uni.navigateTo({
        url: "/pages/main/pub/yuyue-list",
      });
    },
    jiezhong() {
      //接种计划
      uni.navigateTo({
        url: "/pages/main/pub/jiezhonglist",
      });
    },
    myenshrinemessage() {
      //我的收藏
      uni.navigateTo({
        url: "/pages/main/pub/mydetail",
      });
    },
    //去意见反馈页
    gofeedback() {
      uni.navigateTo({
        url: "/pages/main/pub/feedback-list",
      });
    },
    //去我的订单
    mylist() {
      uni.navigateTo({
        url: "../serve/shoplist_page",
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
    getDateQk() {
      let userId = uni.getStorageSync("user").id;
      this.config
        .get("/initUser/getUserDataQk", {
          userId: userId,
        })
        .then(({ data: { data } }) => {
          console.log(data); //1显示  0不显示
          // this.iscard = data;
		  setTimeout(()=>{
			  this.infonum = data
		  },600)
        });
    },
  },
  mounted() {
    uni.onTabBarMidButtonTap((s) => {
      this.isShowMenu = !this.isShowMenu;
    });
    this.user = this.config.globalData.user;
    uni.$on("user", (bool) => {
      this.user = this.config.globalData.user;
      this.utys = this.config.globalData.user.userType;
    });
  },
  onShow() {
    this.getDateQk();
    this.tipShow();
    this.isReport();
    this.getIdx();
    this.isShowMenu = false;
  },
};
</script>

<style lang="less" scoped>
.head {
  position: fixed;
  width: 100%;
  height: 600upx;
  background-color: #18c7e1;
  padding-top: 1upx;
  z-index: 1;

  .topIcon {
    position: relative;
    width: 100%;

    .iconfont {
      position: absolute;
      top: 80upx;
      right: 30upx;
      color: #eee;
    }

    .badge {
      position: absolute;
    }
  }

  .tag {
    padding: 0 20upx;
    background-color: orange;
    color: #fff;
    font-size: 20upx;
    border-radius: 20upx;
  }

  .ulist {
    margin-top: 30upx;

    .uitem {
      display: flex;
      margin-right: 30upx;

      .userImg {
        width: 60upx;
        height: 60upx;
        margin-right: 30upx;
        margin: 0;
      }
    }
  }
}

.tools {
  .item {
    width: 25%;
    text-align: center;
    margin-bottom: 60upx;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .head {
    background-color: #1b1c1e !important;
  }

  .bds {
    background-color: #1b1c1e !important;
  }

  .btn {
    background-color: #1b1c1e !important;
  }

  .s1 {
    color: #ebeeee !important;
  }

  .downbaner {
    position: fixed;
    background-color: #000000 !important;
    height: 600px;
    width: 100%;
    color: #ccc !important;
  }
}
</style>
